<script>
export default {
    name: "GColumn",
    props: {
        columns: {
            type: Object,
            required: true
        },
    },
    methods: {
        //渲染基本的列
        renderTableColumns(columns) {
            //动态渲染列
            return columns.map((col, i) => {
                // $slots和 $scopedslots区别 
                //纯使用外部传递  根据外部插槽调用方法传参给外部
                return this.renderTableCol(col, i)
            });
        },
        renderTableCol(col) {
            // 可以根据字符串传递html结构的内容.生成出来
            let scopedSlots; // undefiend
            if (col.formatter) {
                scopedSlots = {
                    // 箭头函数: JSX的能力 $createElenent无效
                    default:  (prop) =>{
                        // 绝大部分使用attrs, 特殊属性使用domProps
                        return <div domPropsInnerHTML={ col.formatter(prop)  }/>
                    }
                }
            }

            // default 插槽
            return col.slot ? this.$scopedSlots[col.slot]?.(col) : !col.isHide && (
                <el-table-column
                    label={col.label}
                    prop={col.prop}
                    width={col.width}
                    scopedSlots={scopedSlots}
                >
                    {
                        col.children && col.children.length > 0 &&
                        this.renderTableColumns(col.children)
                    }
                </el-table-column>)
        },
    },
    render() {
        return this.renderTableCol(this.columns)
    },
}
</script>